<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<!DOCTYPE html>

<html>

<head>
    <title>${sysConfiguration.sysName}</title>
    <link href="${ctx}/static/miiteen/controls/animate/animate.min.css" rel="stylesheet"/>
    <link href="${ctx}/static/miiteen/controls/element/index.css" rel="stylesheet"/>
    <!--浏览器兼容-->
    <script src="${ctx}/static/miiteen/controls/compatible/bluebird.min.js" type="text/javascript"></script>
    <!--全局与组件-->
    <script src="${ctx}/static/miiteen/controls/vue/vue.js" type="text/javascript"></script>
    <script src="${ctx}/static/miiteen/controls/element/index.js" type="text/javascript"></script>
    <script src="${ctx}/static/miiteen/controls/axios/axios.min.js" type="text/javascript"></script>
    <script src="${ctx}/static/miiteen/custom/miiteen.core.js" type="text/javascript"></script>
    <script src="${ctx}/static//miiteen//custom/v1/vue-compent/vue-components.js"></script>
    <!--兼容IE9 -->
    <script src="${ctx}/static/babel/polyfill.js"></script>
    <script src="${ctx}/static/babel/babel.min.js"></script>

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        /*===========================布局样式================================*/
        #homepage {
            height: 100%;
        }

        .el-container.is-vertical {
            height: 100%;
        }

        .el-container.el-body {
            height: calc(100% - 64px);
        }

        /*===========================头部页面样式==================================*/
        .el-header {
            display: flex;
        }

        .el-header.topmenu {
            padding: 0;
            background-color: #0A2140;
        }

        .topmenu .logo {
            width: 232px;
            display: flex;
            padding: 8px 16px;
            box-sizing: border-box;
        }

        .topmenu .logo img {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }

        .topmenu .firstMenu {
            display: flex;
            width: calc(100% - 560px);
        }

        .topmenu .firstMenu .mt-topbar {
            width: 100%;
        }

        .topmenu .firstMenu .mt-topbar .el-submenu__title {
            font-size: 16px;
            height: 100%;
        }

        .topmenu .firstMenu .mt-topbar .el-submenu__title,
        .topmenu .firstMenu .mt-topbar .el-menu-item,
        .mt-topbar-popper .el-menu-item {
            font-size: 16px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .topmenu .topbar-right {
            width: 300px;
            display: flex;
            flex-direction: row-reverse;
            justify-items: center;
            align-items: center;
            background-color: #0A2140;
        }

        .topmenu .topbar-right .person {
            width: 100px;
            height: 100%;
            display: flex;
        }

        .topmenu .person .el-dropdown {
            margin: auto auto;
            cursor: pointer;
            font-size: 18px;
        }

        .topmenu .topbar-right .person .el-menu--horizontal.el-menu {
            background-color: #0A2140;
            border-bottom-width: 0px;
        }

        .topmenu .topbar-right .person .el-menu--horizontal > .el-submenu .el-submenu__title {
            height: 100%;
            border-bottom: 0;
            font-size: 16px;
            color: #ffffff;
            background-color: #0A2140;
            padding-right: 0px;
        }

        .person-submenu.el-menu--horizontal .el-menu.el-menu--popup {
            min-width: 140px;
        }

        .person-submenu.el-menu--horizontal .el-menu .el-menu-item {
            color: #282828;
        }

        .person-submenu .el-menu-item:hover {
            background-color: rgba(24, 144, 255, 0.3);
        }

        .person-submenu .el-divider.el-divider--horizontal {
            margin: 0px;
        }

        /*==========================左侧菜单样式===============================*/
        #secondMenu .el-submenu__title {
            color: rgba(51, 51, 51, 1);
        }

        #secondMenu .is-opened .el-submenu__title {
            color: #1890FF;
        }

        #secondMenu .el-menu-item {
            color: rgba(51, 51, 51, 1);
        }

        /*==========================内容页面样式===============================*/
        #homepage .el-main {
            height: 100%;
            background-color: #EAEAEA;
            padding: 24px;
            display: block;
            position: relative;
        }

        .el-main .main-nav {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
        }

        .main-content {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #eee;
            overflow: auto;
            padding: 20px;
            box-sizing: border-box;
        }

        #main-content2 {
            position: absolute;
            top: 16px;
            left: 16px;
            z-index: 1;
        }

        .mainframe {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: block;
            box-sizing: border-box;
            background-color: #EAEAEA;
        }
        .el-menu.el-menu--horizontal {
            border: none;
            /* border-bottom: solid 1px #e6e6e6; */
        }
        header{
            position: fixed;
            z-index: 9;
            width: 100%;
            height: 64px;
            font-size: 24px;
            color: #333;
            text-align: center;
            line-height: 60px;
            background: #0A2140;
        }

        section{
            padding: 60px 0;
        }
        .logo{
           float: left;
            width: 232px;
            display: flex;
            padding: 8px 16px;
            box-sizing: border-box;
        }
        .logo img{
            width: 100%;
            height:100%
        }
        .firstMenu{
            float: left;
            width: 80%;
            height: 100%;
        }
        .user{
            float: right;
            width:7% ;
            height: 100%;
            padding-right: 20px;
            box-sizing: border-box;
        }
        .person{
            width: 100%;
            height: 100%;
        }
        .el-menu .el-menu--horizontal{
            height: 100%;
            background-color: transparent;
        }
        .el-menu--horizontal>.el-submenu:focus .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title {
            color: #fff;
            font-weight: 400;
        }
        .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
            background-color: #0a2140;
            color: #fff;
            font-weight: 400;
        }
        .el-menu--horizontal>.el-submenu .el-submenu__title {
            height: 64px;
            line-height: 64px;
            font-weight: 400;
            /*border-bottom: 2px solid transparent;*/
            color: #fff;
            background-color: #0a2140;
        }
        .el-menu {
            background-color: transparent;
            border: none;
        }
        a{
            text-decoration: none;
        }
        .left-secondMenu{
            float: left;
            padding-top: 64px;
            width: 12%;
            height: 100%;
            box-sizing: border-box;
            box-sizing: border-box;
        }
        .container{
            float: left;
            padding-top: 64px;;
            width: 88%;
            height: 100%;
            background-color: #0e90d2;
            box-sizing: border-box;
        }
    </style>
</head>
<div id="homepage">
    <!--顶部header-->
    <header>
        <div class="logo">
            <img id="logoimg" src="">
        </div>
        <div class="firstMenu">
            <el-menu
                    id="firstMenu"
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="firstMenuSelect"
                    background-color="#0A2140"
                    text-color="#fff"
                    active-text-color="#409eff">
                <el-menu-item v-for="(item,index) in menulist" :index="index.toString()" :key="index"  >{{item.name}}</el-menu-item>
            </el-menu>
        </div>
        <div class="user">
            <div class="person">
                <el-menu mode="horizontal" @select="personSelect">
                    <el-submenu index="0" popper-class="person-submenu">
                        <template slot="title">${userName}</template>
                        <el-menu-item index="modify">
                            <i class="el-icon-edit-outline"></i>
                            <span>修改密码</span></el-menu-item>
                        <el-menu-item index="exit">
                            <el-divider style="margin:0px;"></el-divider>
                            <i class="el-icon-switch-button"></i>
                            <span>退出登录</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
        </div>
    </header>
    <!--左侧菜单-->
    <div class="left-secondMenu">
        <el-menu ref="secondMenu" default-active="0-0" @select="thirdMenuSelect"
                 active-text-color="#1890FF">
            <template v-for="(secondMenu,secondMenuindex) in secondMenuList">
                <el-submenu :index="String(secondMenuindex)">
                    <template slot="title">
                        <span>{{secondMenu.name}}</span>
                    </template>
                    <template v-for="(threeMenu,threeMenuindex) in secondMenu.listSysWebMenu">
                        <el-menu-item :index="String(secondMenuindex)+'-'+String(threeMenuindex)">
                            <span slot="title">{{threeMenu.name}}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </div>
    <!--内容区域-->
    <div class="container">
        <div id="main-content" class="main-content" v-loading="contentView.loading"
             element-loading-background="#ffffff">
            <iframe v-show="formView.visible==false" id="mainframe" class="mainframe" frameborder="0"
                    seamless src=""></iframe>
            <iframe v-show="formView.visible" id="mainframe2" class="mainframe" frameborder="0"
                    seamless src=""></iframe>
        </div>
    </div>
    <!--修改密码-->
    <el-dialog :visible.sync="modifyPwd.visible" width="30%" title="修改密码" :close-on-click-modal="false" center>
        <el-form ref="modifyPwd" :rules="modifyPwd.rules" :model="modifyPwd.data" label-width="0px">
            <el-form-item  prop="oldpwd">
               原密码<el-input type="password" v-model="modifyPwd.data.oldpwd" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item  prop="newpwd">
                新密码<el-input type="password" v-model="modifyPwd.data.newpwd" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item prop="confirmpwd">
                确认新密码<el-input type="password" v-model="modifyPwd.data.confirmpwd" placeholder="重新输入新密码"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="modifyPassWord">确 定</el-button>
        </span>
    </el-dialog>

</div>
<!--弹窗控件-->
<%@include file="/WEB-INF/views/layout/miiteen/module.select.ref.jsp" %>
</html>
<script type="text/babel">
    var Home = new Vue({
        el: "#homepage",
        data: {
            breadcrumb: {
                first: "首页",
                second: "示例",
                third: "列表页面"
            },
            activeIndex:'0',
            menulist: [],
            secondMenuList: [],
            contentView: {
                loading: false
            },
            formView: {
                visible: false
            },
            modifyPwd: {
                visible: false,
                data: {
                    oldpwd: "",
                    newpwd: "",
                    confirmpwd: ""
                },
                rules: {
                    oldpwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    newpwd: [
                        {required: true, message: '请输入新密码', trigger: 'blur'}
                    ],
                    confirmpwd: [
                        {required: true, message: '请再次输入新密码', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                //logo图片
                document.getElementById("logoimg").setAttribute("src", "${ctx}/static/frame/images/login/logo.png");
                //获取一级菜单
                var url = "${ctx}/home/firstmenu?accountid=${accountid}";
                miiteen.ajax.get(url, res => {
                    this.menulist = res.data;
                    //默认打开第一个一级菜单
                    console.log(this.menulist,1111)
                    setTimeout(e => {
                        this.firstMenuSelect("0");
                    }, 500)
                })
                //绑定iframe加载完事件
                let listIframe = document.getElementById("mainframe");
                let formIframe = document.getElementById("mainframe2");
                listIframe.onload = listIframe.onreadystatechange = formIframe.onload = formIframe.onreadystatechange = () => {
                    this.hideContentViewLoading();
                }
            })
        },
        methods: {
            thirdMenuSelect: function (index, indexPath) {
                if (this.secondMenuList.length < 1) {
                    return;
                }
                var secondMenu = this.secondMenuList[Number(indexPath[0])];
                if (!secondMenu || !secondMenu.listSysWebMenu || secondMenu.listSysWebMenu.length < 1) {
                    //mtMsg.warnbox(this.breadcrumb.first + "没有下级菜单");
                    return;
                }
                var thirdMenu = secondMenu.listSysWebMenu[Number(indexPath[1].split('-')[1])];
                if (!thirdMenu) {
                    //mtMsg.warnbox(secondMenu.name + "没有下级菜单");
                    return;
                }
                this.breadcrumb.second = secondMenu.name;
                this.breadcrumb.third = thirdMenu.name;
                //加载内容页面
                var url = thirdMenu.linkUrl;
                this.openListView(url);
            },
            //一级菜单选中
            firstMenuSelect(index, indexPath) {
                console.log(index,indexPath)
                this.breadcrumb.first = this.menulist[index].name;

                //获取二级菜单
                var url = "${ctx}/home/secondmenu?accountid=${accountid}&parentId=" + this.menulist[index].id;
                miiteen.ajax.get(url, res => {
                    this.secondMenuList = res.data;
                    //默认打开第一个界面
                    setTimeout(e => {
                        this.thirdMenuSelect(index, [index, index + "-0"]);
                    }, 500)
                });
            },
            //显示内容页面加载提示
            showContentViewLoading() {
                this.contentView.loading = true;
            },
            //隐藏内容页面加载提示
            hideContentViewLoading() {
                this.contentView.loading = false;
            },
            //列表Iframe更换界面
            mainIframeGo(url) {
                document.getElementById("mainframe").setAttribute("src", url);
            },
            //表单Iframe更换界面
            mainIframe2Go(url) {
                document.getElementById("mainframe2").setAttribute("src", url);
            },
            //打开列表界面
            openListView(url) {
                this.closeFormView();
                this.showContentViewLoading();
                this.mainIframeGo(url);
            },
            //打开表单界面
            openFormView(url) {
                this.showContentViewLoading();
                this.mainIframe2Go(url);
                this.formView.visible = true;
            },
            //关闭表单界面
            closeFormView() {
                this.formView.visible = false;
                document.getElementById("mainframe2").innerHTML = "";
            },
            //个人中心
            personSelect(index, indexPath) {
                switch (index) {
                    case "modify":
                        this.modifyPwd.visible = true;
                        break;
                    case "exit":
                        window.location.href = "${ctx}/login/out";
                        break;
                }
            },
            //修改密码
            modifyPassWord: function () {
                this.$refs["modifyPwd"].validate(valid => {
                        if (valid) {
                            var url = "${ctx}/api/sys/modifypwd?account=${userName}&pwd=" + this.modifyPwd.data.oldpwd + "&newpwd=" + this.modifyPwd.data.newpwd + "&confirmpwd=" + this.modifyPwd.data.confirmpwd;
                            miiteen.ajax.post(url, {}, result => {
                                result = result.data;
                                if (result.state > 0) {
                                    this.modifyPwd.visible = false;
                                    this.$message({
                                        showClose: true,
                                        message: result.message,
                                        type: 'success'
                                    });
                                    this.modifyPwd.data = {
                                        oldpwd: "",
                                        newpwd: "",
                                        confirmpwd: ""
                                    };
                                } else {
                                    this.$alert(result.message, {type: 'error'})
                                }
                            });
                        } else {
                            return false;
                        }
                    }
                );
            }
        },
    })

    var mtMsg = {
        success: function (msg) {
            Home.$message({
                showClose: true,
                message: msg,
                type: 'success'
            });
        },
        warnbox: function (msg, callback) {
            Home.$alert(msg, {
                type: 'warning',
                callback: callback
            })
        },
        error: function (msg, callback) {
            Home.$message({
                showClose: true,
                message: msg,
                type: 'error',
                callback: callback
            });
        },
        confirm: function (msg, callback) {
            Home.$confirm(msg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(callback).catch(function () {
            });
        },
        dialog: function (title, content) {
            Home.dialog = {
                title: title,
                content: content,
                visible: true
            }
        }
    }
</script>
